<template>
	<view class="">
		<view class="content">
			<!-- 头部banner -->
			<detail-swiper :list="swiperList"></detail-swiper>
			<view class="content_info">
				<!-- 活动具体信息 -->
				<detail-info 
				:activityTitle="activityInfo.activityName" 
				:activiyTime="activityInfo.timeStart+'至'+activityInfo.timeEnd"
				:finishTime="activityInfo.timeEnd"
				>
					<view class="other-content" slot="other">
						已有{{activityInfo.number}}人报名
					</view>
				</detail-info>
				<!-- 活动门店 -->
				<view v-if="activityInfo.unitDto" style="margin-top: 20upx;">
					<home-title title="活动门店" type="2"></home-title>
					<view style="margin-bottom: 20upx;" v-for="(item, index) in activityInfo.unitDto" :key="index">
					  <store-cell
						  :isLocation="0"
						  :storeName="item.applicableUnit"
						  :storeAddress="item.unitAddress"
						  :distance="item.distance"
						  :phone="item.unitPhone"
						  :latitude="item.unitLat"
						  :longitude="item.unitLon"
						></store-cell>
					</view>
				</view>
				<!-- 活动介绍 -->
				<detail-introduce :richInfo="activityInfo.collectContent"></detail-introduce>
			</view>
			
		</view>
		 <!-- 底部按钮 -->
		 <view class="bottomView">
		 	 <view class="btn leftBtn" @click="shareActivity">
				 分享好友
		 	 	<button  style="position: absolute; width: 100%; height: 100%; opacity: 0;" open-type="share">  </button>
		 	 </view>
			 <view v-if="activityInfo.isParticipate == 2" class="btn rightBtn" @click.stop="clickApply">
			 	立即报名
			 </view>
			 <view v-if="activityInfo.isParticipate == 1" class="btn rightBtn" style="background-color: #999999">
			 	已报名
			 </view>
		 </view>
		 
		 <!-- 立即报名弹框 -->
	  <u-popup safeAreaInsetTop mode="bottom" :show="popupShow" round="10" closeable @close="popupShow=false">
	     <apply-popup :bizNo="activityId" @applySuccess="applySuccess"></apply-popup>
	  </u-popup>
		<login-mask></login-mask>
	</view>
</template>

<script>
	import detailSwiper from "../../components/activity/activity-detailSwiper.vue"
	import detailInfo from '../../components/activity/activity-detailInfo.vue'
	import detailIntroduce from '../../components/activity/activity-detailIntroduce.vue'
	import homeTitle from '../../components/layout/mmv-home-title.vue'
	import storeCell from '../../components/coupon/store-cell.vue'
	import applyPopup from '../../components/activity/activity-applyPopup.vue'
	import {apiCollectInfo,insertActivityBrowseRecords} from '../../common/api.js'
	import loginMask from '@/components/layout/login-mask.vue'
	import GLOBAL_CONFIG from '@/common/config';
export default {
	components: {
		detailSwiper,
		detailInfo,
		detailIntroduce,
		applyPopup,
		homeTitle,
		storeCell,
		loginMask
	},
	data() {
		return {
			time:0,
			timeNumber:0,
			popupShow: false,
			lat : '',
			lon : '',
			activityId : '',
			activityInfo : {},
			swiperList:[],
			baseImageUrl : GLOBAL_CONFIG.yxBaseImageUrl,
		}
	},
	onLoad(op) {
		this.activityId = op.bizNo;
		console.log('收到的deptId=>', op.deptId);
		
		getApp().globalData.tempDeptId = op.deptId;
		if(!uni.$u.test.isEmpty(op.deptId)){
			this.$store.commit('user/saveSourceType', 4);
			this.$store.commit('user/savedeptId', op.deptId);
		}
		
		getApp().globalData.tempCustomerId = op.customerId;
		if(!uni.$u.test.isEmpty(op.customerId)){
			this.$store.commit('user/saveCustomerId', op.customerId);
		}
		
		this.getLocation();
		this.reckonBytime()
	},
	beforeDestroy() {
		this.insertActivityBrowseRecords()
		clearInterval(this.time)
	},
	methods: {
		insertActivityBrowseRecords(){
			insertActivityBrowseRecords({
				bizNo : this.activityId,
				memberNo : this.$store.state.user.userInfo.customerId,
				browseDuration : this.time,
				tenantId:this.$store.state.user.tenantCode,
				activityType:2
			}).then(res => {})
		},
		reckonBytime(){
			this.time=setInterval(()=>{
				this.timeNumber++
			},1000)
		},
		//获取定位信息
		getLocation() {
			uni.getLocation({
			    type: 'wgs84',
			    success:  (res => {
						console.log(res.latitude);
						this.lat = res.latitude;
						this.lon = res.longitude;
						this.getData();
					}),
					fail:(e=>{
						this.getData();
					})
			});
		},
		//获取详情数据
		getData() {
		 let that = this;
		 apiCollectInfo({
			 bizNo : that.activityId,
			 lon : this.lon,
			 lat : this.lat,
			 memberNo : this.$store.state.user.userInfo.customerId
		 }).then(res => {
			 this.activityInfo = res;
			 if(this.activityInfo.detailsImage.length>0){
				 let arr = this.activityInfo.detailsImage.split(',');
				   this.swiperList = arr.map(item=>{
				 	  return  GLOBAL_CONFIG.yxBaseImageUrl + item;
				   })
			 }
		 })
		},
		clickApply() {
			if(uni.$u.test.isEmpty(this.$store.state.user.userInfo)){
				this.$store.dispatch('user/MmvLogin');
				return
			}
			
			this.popupShow=true;
			
		},
		//报名成功的回调事件
		applySuccess() {
			this.popupShow = false;
			this.getData();
		},
		onShareAppMessage(res) {
			return {
				title: this.activityInfo.activityName,
				imageUrl : this.baseImageUrl + this.activityInfo.shareImage,
				path:'/pages/activity/activityDetail-gather?bizNo=' + this.activityId + '&deptId='+this.$store.state.user.deptId + '&customerId=' + this.$store.state.user.userInfo.customerId
			}
		}
	},
	onShareTimeline() {
		return {
			title: this.activityInfo.activityName,
			imageUrl : this.baseImageUrl + this.activityInfo.shareImage,
			path:'/pages/activity/activityDetail-gather?bizNo=' + this.activityId + '&deptId='+this.$store.state.user.deptId + '&customerId=' + this.$store.state.user.userInfo.customerId
		}
	}
	
	
}
</script>

<style lang="scss" scoped>
.content {
		margin-bottom: 100upx;
		&_info {
			padding: 0 30upx;
			position: relative;
			top: -60upx;
		}
	}
	.bottomView {
		display: flex;
		width: 100%;
		height: 96upx;
		line-height: 96upx;
		position: fixed;
	  bottom: 0;
		left: 0;
		z-index: 1;
	}
	
	.btn {
		width: 50%;
		line-height: 100%;
		font-size: 33upx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
		
	.leftBtn {
	 color: #666;
	 background-color: #FFFFFF;
	 height: 96upx;
	 line-height: 96upx;
	 align-self: center;
	 text-align: center;
	}
	.rightBtn {
		color: #fff;
		background-color: #12BAA4;
	}
	.other-content {
		font-size: 28upx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: bold;
		text-align: left;
		margin-top: 30upx;
		color: #ec4863;
	}
</style>

